<template>
  <div id="app">
    <nav>
      <el-card shadow="always">
        {{userSearch}}
        <el-form :inline="true" size="medium" :model="userSearch" class="demo-form-inline">
          <el-form-item label="姓名">
            <el-input v-model="userSearch.name" placeholder="姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="userSearch.sex" placeholder="性别">
              <el-option label="男" value="M"></el-option>
              <el-option label="女" value="F"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" plain @click="editUser" icon="el-icon-plus">添加用户</el-button>
          </el-form-item>
        </el-form>
        <el-table
            :data="userList"
            style="width: 100%">
          <el-table-column
              label="姓名"
              prop="name"
              align="center">
          </el-table-column>
          <el-table-column
              label="年龄"
              prop="age"
              align="center">
          </el-table-column>
          <el-table-column
              label="性别"
              prop="sex"
              align="center">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5,10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-card>
      <el-dialog title="title"  :close-on-click-modal="false" :visible.sync="dialogFormVisible">
        {{user}}
        <el-form :model="user">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="user.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="user.age" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-select v-model="user.sex" placeholder="请选择性别">
              <el-option label="男" value="M"></el-option>
              <el-option label="女" value="F"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="电话" :label-width="formLabelWidth">
            <el-input v-model="user.phone" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveUser">确 定</el-button>
        </div>
      </el-dialog>
    </nav>
  </div>
</template>
<script>
import userApi from "@/api/user"

export default {
  data() {
    return {
      userList: [],
      page: 1,
      pageSize : 5,
      total:110,
      userSearch:{},//查询条件对象
      dialogFormVisible:false,  // 控制对话框的显示隐藏
      formLabelWidth:'100px',   // 对话框提示文本的宽度
      user: {},              // 学生对象（添加或修改）
      title: '添加用户',          // 对话框标题
    }
  },
  created: function () {
   this.findByPage(this.page,this.pageSize)
  },
  methods: {
    //1.查询所有用户
    findUsers(){
      this.$axios.get('/user/list.do')
          .then(res => {
            console.log("hello,vue")
            this.userList = res.data
          })
    },
    async findByPage(page,pageSize) {
      // this.$axios.get(`/user/findByPage.do?page=${page}&pageSize=${pageSize}`).then(
      //     res =>{
      //       console.log("分页数据",res)
      //       this.userList = res.data.rows
      //       this.total = res.data.total
      //     }
      // )
     const {data:res} = await userApi.findByPage(this.page,this.pageSize)
      this.userList =res.rows
      this.total = res.total
    },
    async search(page,pageSize,userSearch){
    const {data} = await userApi.search(this.page,this.pageSize,this.userSearch)
    this.userList = data.rows
      this.total = data.total
    },
    editUser(){
      this.dialogFormVisible = true;
    },
    async saveUser(){

      const {data:res} = await userApi.save(this.user)
      if (res.code == 200){
        this.$message({
          type: 'success',
          message: res.message
        })
        this.dialogFormVisible = false;
        this.search()
      }else {
        this.$message({
          type: 'error',
          message: res.message
        })
      }

    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.findByPage(this.page,this.pageSize)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val
      this.findByPage(this.page,this.pageSize)
    }
  }
}

</script>
<style>
.el-card {
  width: 900px;   /* 固定宽度 */
  height: 600px;  /* 固定高度 */
  margin: 20px auto; /* 居中显示，并有一定的上、下边距 */
  padding: 20px;  /* 内部填充 */
  box-sizing: border-box; /* 确保padding不会影响总宽度和高度 */
}
    #app{display: flex;
      justify-content: center;
    }
    .el-pagination{
      text-align: right;
      margin-top: 15px;
    }
</style>
